<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" />
  </head>
  <style type="text/css">
    .searchModel {
      position: fixed;
      /*top: 60px;*/
      z-index: 10;
      height: 60px;
      width: 100%;
      padding-top: 10px;
      background: #f5f5f5;
    }

    #search {
      position: absolute !important;
      width: 94%;
      margin-left: 3%;
    }

    #search input {
      background: #fff;
    }

    #search .mui-btn {
      width: 70%;
    }

    .mui-icon.mui_a {
      font-size: 0.9rem;
      line-height: 26px;
    }
    .mui-table-view-cell>a:not(.mui-btn) {
      position: relative;
      display: block;
      overflow: hidden;
      margin: -11px -15px;
      padding: inherit;
      white-space: normal; 
       text-overflow: ellipsis; 
      color: inherit;
  }
  </style>
  <body>
    <div id="content">
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
        <h1 class="mui-title">{{type==1?'区域选择':'场站选择'}}</h1>
      </header>
      <div class="mui-content">
        <div class="searchModel">
          <form action="#">
            <div class="mui-input-row mui-search mui-row" id="search">
              <input type="search" id="peoInp" placeholder="搜索" class="mui-input-clear">
            </div>
          </form>
          <!--<div id="submit">搜索</div>-->
        </div>
        <div id="refreshContainer" class="mui-scroll-wrapper bg-white" style="margin-top: 60px;">

          <div class="mui-scroll">
            <ul class="mui-table-view mui-table-view-radio">
              <li class="mui-table-view-cell" v-for="item in list" :key="item.id" @click="choose(item)">
                <a class="mui-navigate-right">
                  {{item.name}}
                </a>
              </li>
            </ul>
            
            <!-- </div> -->
          </div>
        </div>
      </div>

    </div>
  </body>
  <script src="../../../js/mui.min.js"></script>
  <script src="../../../js/vue.js"></script>
  <script src="../../../js/jquery-1.7.2.min.js"></script>
  <script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../../js/mui.dtpicker.js"></script>
  <script src="../js/sqlite.js"></script>
  <script src="../js/mkeyplus.base.js"></script>
  <script>
    var projectVM = null; // 列表实例
    var size = 15;
    var page = 0;
    var type=1;
    mui.init({
      pullRefresh: {
        container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
        down: { //下拉刷新
          style: 'circle',
          height: 50, //可选,默认50.触发下拉刷新拖动距离,
          auto: false, //可选,默认false.首次加载自动下拉刷新一次
          contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
          contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
          contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
          callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            page = 0;
            load(page);
            ////没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
            mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
            // countDown++;
          }
        },
        up: { //上拉加载
          height: 50, //可选.默认50.触发上拉加载拖动距离
          auto: false, //可选,默认false.自动上拉加载一次
          contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
          contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
          callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            /*每次加载动态的添加一个li*/
            // $("#testUl").append($("<li>" + new Date() + "</li>"));
            this.endPullupToRefresh(false)
            page++;
            load(page);
          }
        }
      }
    });
    mui.plusReady(function() {
      cv = plus.webview.currentWebview();
      type = cv.type;
      projectVM.type=type;
      load(page);
    })
    projectVM = new Vue({
      el: "#content",
      data: {
        list: [],
        name:'',
        type:1
      },
      created: function() {},
      methods: {
        choose(item) {
          console.log('已选择' + JSON.stringify(item))
          var item = item;
          //获取父页面A.html
          var cv = plus.webview.currentWebview();
          var opener = cv.opener()
          var id=opener.id
          var main = plus.webview.getWebviewById(id);
          //自定义事件,事件名为chooseItem
          if(this.type==1){
            mui.fire(main, 'chooseArea', {
              item: item
            });
			localStorage.setItem('parentId',item.id);
          }else{ 
            mui.fire(main, 'chooseStation', {
              item: item
            });
          }
          
          //关闭子页面
          mui.back();
        }
      }
    })
    // 搜索框搜索事件
    			document.getElementById("peoInp").addEventListener("input",function(){
    				//console.log(this.value)
    				projectVM.name = this.value;
    				page=0;
            load(page);
    			},false);
    			
    			//搜索框 小叉点击事件
    			mui("body").on("tap", ".mui-icon-clear", function() {
    				projectVM.name = '';
    				page=0;
    				load(page);
    			});
    function load(page) {
      var prams={
        page: page,
        size: size,
        sort: 'id,desc',
        enabled: true,
        name:projectVM.name
      }
      //if(type==1){
        prams.type=type
      //}
	  if(prams.type == 0){
		  prams.parentId = localStorage.getItem('parentId') || '';
	  }else{
		  delete prams.parentId;
	  }
	  console.log('params=',JSON.stringify(prams));
      mui.baseApp.httpRequst("/api/dept",prams, function(data) {
        console.log(JSON.stringify(data.records))
        if (page == 0) {
          projectVM.list = []
        }
        projectVM.list = projectVM.list.concat(data.records)
        // console.log('设备档案数据' + JSON.stringify(data))
        //如果每次获取数据小于10条,或未获取成功则显示没有更多了.
        if (data.records.length < size) { //
          mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
          mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
          return;

        } else {
          mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
          mui('#refreshContainer').pullRefresh().enablePullupToRefresh(); //启用上拉加载
        }
      }, function() {
        console.log("获取数据失败");
      })
    }
   
  </script>
</html>
